import { imgPath } from "@/common/utils";
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import styles from "./detail.module.less";

export default defineComponent({
  setup() {
    const router = useRouter();

    const state = reactive({
      orderNum: 'D2212131055510357170 ',
      submitDate: '2022-12-13 10:55:51',
      status: '已出单',
    })

    //标题
    const ArticleHeader = (props: any) => (
      <div class={styles['article-header']}>
        <span>{props.title}</span>
      </div>
    )

    const insureInfos = reactive({
      product: ' 2023年度旅行社责任险2023年度旅行社责任险 2023年度旅行社责任险',
      company: '中国人民财产保险股份有限公司宁波市分公司',
      total_expense: '11017.59',
      payment_options: '转账支付'
    })

    //保单基本信息
    const InsureInfo = () => (
      <div class={styles['insure-info']}>
        <ArticleHeader title={'保单基本信息'} />
        <div class={styles['insure-info-list']}>
          <div class={styles['list-row']}>
            <div class={styles['list-col']}>
              <span class={styles['insure-label']}>保险产品：</span>
              <span class={styles['insure-value']}>{insureInfos.product}</span>
            </div>
            <div class={styles['list-col']}>
              <span class={styles['insure-label']}>出单公司：</span>
              <span class={styles['insure-value']}>{insureInfos.company}</span>
            </div>
          </div>
          <div class={styles['list-row']}>
            <div class={styles['list-col']}>
              <span class={styles['insure-label']}>保险保费：</span>
              <span class={[styles['insure-value'], styles.active]}>{insureInfos.total_expense}元</span>
            </div>
            <div class={styles['list-col']}>
              <span class={styles['insure-label']}>支付方式：</span>
              <span class={styles['insure-value']}>{insureInfos.payment_options}</span>
            </div>
          </div>
        </div>
      </div>
    )

    const insureUsers = reactive({
      company_name: '宁波世纪美亚国际旅行社有限公司',
      insured_branch: '0',
    })

    //投（被）保人信息
    const InsureUser = () => (
      <div class={styles['insure-user']}>
        <ArticleHeader title={'投（被）保人信息'} />
        <div class={styles['insure-user-list']}>
          <div class={styles['insure-user-item']}>
            <span class={styles['insure-user-label']}>投（被）保旅行社名称：</span>
            <span>{insureUsers.company_name}</span>
          </div>
          <div class={styles['insure-user-item']}>
            <span class={styles['insure-user-label']}>被保分社：</span>
            <span>{insureUsers.insured_branch}</span>
          </div>
        </div>
      </div>
    )

    //保障责任
    const InsureProgram = () => (
      <div class={styles['insure-program-area']}>
        <ArticleHeader title={'保障责任'} />
        <table class={styles['insure-program']}>
          <tr>
            <td class={styles['cell-name']}>基本险（必填）</td>
            <td class={styles['main-risk']}>
              <div class={styles['main-risk-row']}>
                <div class={styles['main-risk-col']}>每次事故及累计责任</div>
                <div class={[styles['main-risk-col'], styles['risk-info']]}>
                  <span>每次事故责任限额：4000000元</span>
                  <span>累计责任限额：4000000元</span>
                </div>
              </div>
              <div class={styles['main-risk-row']}>
                <div class={styles['main-risk-col']}>每次事故每人责任</div>
                <div class={[styles['main-risk-col'], styles['risk-info']]}>
                  <span>每次事故每人人身伤亡责任限额:1000000元</span>
                  <span>每人有责延误费用责任限额:10000元</span>
                  <span>每人精神损害责任限额:20000元</span>
                </div>
              </div>
              <div class={styles['main-risk-row']}>
                <div class={styles['main-risk-col']}>法律费用责任</div>
                <div class={[styles['main-risk-col'], styles['risk-info']]}>
                  <span>法律费用责任限额:1200000元</span>
                </div>
              </div>
              <div class={styles['main-risk-row']}>
                <div class={styles['main-risk-col']}>无责救助费用责任</div>
                <div class={[styles['main-risk-col'], styles['risk-info']]}>
                  <span>无责救助费用责任限额:400000元</span>
                </div>
              </div>
              <div class={styles['main-risk-row']}>
                <div class={styles['main-risk-col']}>财产损失责任</div>
                <div class={[styles['main-risk-col'], styles['risk-info']]}>
                  <span>每次事故每人财产损失责任限额:10000元</span>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class={styles['cell-name']}>附加险（选填）</td>
            <td class={styles['additional-risk']}>
              <div class={styles['risk-info']}>
                <img src={imgPath('/userCenter/risk-info.png')} />
                <span>旅程延误保险责任/每次事故及全年累计责任限额：10万元</span>
              </div>
            </td>
          </tr>
          <tr>
            <td class={styles['cell-name']}>免赔额</td>
            <td class={styles['deductible']}>
              <span>每次事故每人绝对免赔额为人民币200元(仅适用于基本险旅游者的财产损失)，其他损失无免赔。</span>
            </td>
          </tr>
        </table>
      </div>
    )

    const insureInvoices = reactive({
      invoice_header: '宁波世纪美亚国际旅行社有限公司',
      invoice_type: '电子普票',
      taxpayer_identification_number: '913302036684861005',
      realname: '童子瑜',
      mobile: '13566335033',
      invoice_value: '11017.59',
      address: '浙江省宁波市鄞州区悦盛路359号007幢14-4',
    })

    //发票信息
    const InsureInvoice = () => (
      <div class={styles['insure-invoice']}>
        <ArticleHeader title={'发票信息'} />
        <div class={styles['insure-invoice-list']}>
          <div class={styles['insure-invoice-item']}>
            <span>发票抬头：</span>
            <span>{insureInvoices.invoice_header}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>发票类型：</span>
            <span>{insureInvoices.invoice_type}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>纳税人识别号：</span>
            <span>{insureInvoices.taxpayer_identification_number}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>联系人：</span>
            <span>{insureInvoices.realname}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>联系人手机号：</span>
            <span>{insureInvoices.mobile}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>发票金额：</span>
            <span>{insureInvoices.invoice_value}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>寄送地址：</span>
            <span>{insureInvoices.address}</span>
          </div>
        </div>
      </div>
    )
    const InsureHistroy = () => (
      <div class={styles['insure-histroy']}>
        <ArticleHeader title={'批单管理'} />
        <table class={styles['insure-histroy-table']}>
          <thead>
            <tr>
              <td>批单号申请</td>
              <td>批改类型</td>
              <td>投保人</td>
              <td>批单日期</td>
              <td>状态</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class={styles.value}>
                  <span>PD230223123251252101</span>
                </div>
              </td>
              <td>
                <div class={styles.value}>
                  <span>企业信息变更</span>
                </div>
              </td>
              <td>
                <div class={styles.value}>
                  <span>宁波世纪美亚国际旅行社有限公司</span>
                </div>
              </td>
              <td>
                <div class={styles.value}>
                  <span>2023-02-23 12:32:51</span>
                </div>
              </td>
              <td>
                <div class={styles.value}>
                  <span class={styles['text-success']}>已出单</span>
                </div>
              </td>
              <td>
                <div class={styles.value}>
                  <div class={styles.btn}>批单详情</div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    )
    return () => (
      <div class={styles.detail}>
        <div class={styles['header-box']}>
          <div class={styles['title-box']}>
            <span>订单详情</span>
            <span class={styles['go-back']} onClick={() => { router.go(-1) }}>返回</span>
          </div>
          <div class={styles['btn-box']}>
            <div class={styles.btn}>申请电子发票</div>
            <div class={styles.btn}>下载电子发票</div>
            <div class={styles.btn}>查看投保单</div>
            <div class={styles.btn}>下载投保单</div>
          </div>
        </div>
        <div class={styles.container}>
          <div class={styles['container-header']}>
            <div class={styles['container-header-item']}>
              <span class={styles.label}>订单号：</span>
              <span>{state.orderNum}</span>
            </div>
            <div class={styles['container-header-item']}>
              <span class={styles.label}>提交时间：</span>
              <span>{state.submitDate}</span>
            </div>
            <div class={styles['container-header-item']}>
              <span class={styles.label}>订单状态：</span>
              <span class={styles.status}>{state.status}</span>
            </div>
          </div>
          <InsureInfo />
          <InsureUser />
          <InsureProgram />
          <InsureInvoice />
          <InsureHistroy />
        </div>
      </div>
    )
  }
})